<template>
    <div class="place-follow-order-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="800px">
            <el-form :model="state.placeFollowOrderInfo" size="default" label-width="auto" style="max-width: 600px">
                <el-row :gutter="25">

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="平台">
                            <el-select v-model="state.placeFollowOrderInfo.platform" placeholder="选择平台" clearable
                                class="w100">
                                <el-option label="Amazon" :value='1'></el-option>
                                <el-option label="海外仓" :value='2'></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="供货商">
                            <el-select v-model="state.placeFollowOrderInfo.vendorId" placeholder="选择供货商"
                                @change="initVendorProductTypeOption('change')" filterable :filter-method="filterVendor"
                                class="w100">
                                <el-option v-for="option in state.vendorOption" :key="option.id" :label="option.name"
                                    :value="option.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="供货商产品类型">
                            <el-select v-model="state.placeFollowOrderInfo.vendorProductTypeId" placeholder="选择供货商产品类型"
                                class="w100">
                                <el-option v-for="option in state.vendorProductTypeOption" :key="option.id"
                                    :label="option.name" :value="option.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="下单日期">
                            <el-date-picker v-model="state.placeFollowOrderInfo.orderTime" value-format="YYYY-MM-DD"
                                type="date" placeholder="选择下单日期" size="default" />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="提货日期">
                            <el-date-picker v-model="state.placeFollowOrderInfo.pickupTime" value-format="YYYY-MM-DD"
                                type="date" placeholder="选择提货日期" size="default" />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="开船日期">
                            <el-date-picker v-model="state.placeFollowOrderInfo.shippingTime" value-format="YYYY-MM-DD"
                                type="date" placeholder="选择开船日期" size="default" />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="实际入仓日期">
                            <el-date-picker v-model="state.placeFollowOrderInfo.actualWarehouseEntryTime"
                                value-format="YYYY-MM-DD" type="date" placeholder="选择实际入仓日期" size="default" />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="是否含税">
                            <el-select v-model="state.placeFollowOrderInfo.taxIncluded" placeholder="" clearable
                                class="w100">
                                <el-option label="否" :value='0'></el-option>
                                <el-option label="是" :value='1'></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="税点">
                            <el-input v-model="state.placeFollowOrderInfo.taxRate" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="预付款日期">
                            <el-date-picker v-model="state.placeFollowOrderInfo.vendorPrepaymentTime"
                                value-format="YYYY-MM-DD" type="date" placeholder="选择预付款日期" size="default" />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="货款剩余">
                            <el-input v-model="state.placeFollowOrderInfo.vendorRemainingPayment" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="货款剩余付款日期">
                            <el-date-picker v-model="state.placeFollowOrderInfo.vendorRemainingPaymentDueTime"
                                value-format="YYYY-MM-DD" type="date" placeholder="选择货款剩余付款日期" size="default" />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="Amazon仓库代码">
                            <el-input v-model="state.placeFollowOrderInfo.amazonWarehouseCode" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="货件编码">
                            <el-input v-model="state.placeFollowOrderInfo.shipmentCode" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="物流编码">
                            <el-input v-model="state.placeFollowOrderInfo.logisticalCode" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="发货方式">
                            <el-select v-model="state.placeFollowOrderInfo.shippingMethod" placeholder="" clearable
                                class="w100">
                                <el-option label="海外仓" :value='1'></el-option>
                                <el-option label="海运" :value='2'></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="物流商">
                            <el-select v-model="state.placeFollowOrderInfo.logisticalId" placeholder="选择供货商" clearable
                                class="w100">
                                <el-option v-for="option in state.logisticalOption" :key="option.id"
                                    :label="option.name" :value="option.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="物流付款日期">
                            <el-date-picker v-model="state.placeFollowOrderInfo.logisticalPaymentTime"
                                value-format="YYYY-MM-DD" type="date" placeholder="选择物流付款日期" size="default" />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="物流付款状态">
                            <el-select v-model="state.placeFollowOrderInfo.logisticalPaymentStatus" placeholder=""
                                clearable class="w100">
                                <el-option label="未付款" :value='0'></el-option>
                                <el-option label="已付款" :value='1'></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="物流价格">
                            <el-input v-model="state.placeFollowOrderInfo.logisticalPrice" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="逆算比例">
                            <el-input v-model="state.placeFollowOrderInfo.reverseRatio" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="报关费">
                            <el-input v-model="state.placeFollowOrderInfo.customsFee" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="内陆运费">
                            <el-input v-model="state.placeFollowOrderInfo.inlandFreight" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="实付税金">
                            <el-input v-model="state.placeFollowOrderInfo.actualTaxPaied" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="实付运费">
                            <el-input v-model="state.placeFollowOrderInfo.actualFreightPaied" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="预计送仓日期">
                            <el-date-picker v-model="state.placeFollowOrderInfo.estimatedDeliveryWarehouseTime"
                                value-format="YYYY-MM-DD" type="date" placeholder="选择预计送仓日期" size="default" />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="实际送仓日期">
                            <el-date-picker v-model="state.placeFollowOrderInfo.actualDeliveryWarehouseTime"
                                value-format="YYYY-MM-DD" type="date" placeholder="选择实际送仓日期" size="default" />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="接收状态">
                            <el-select v-model="state.placeFollowOrderInfo.receiveStatus" placeholder="" clearable
                                class="w100">
                                <el-option label="未接收" :value='0'></el-option>
                                <el-option label="已接收" :value='1'></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="批次">
                            <el-input v-model="state.placeFollowOrderInfo.batchNumber" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="是否一批运走">
                            <el-select v-model="state.placeFollowOrderInfo.oneBatch" placeholder="" clearable
                                class="w100">
                                <el-option label="否" :value='0'></el-option>
                                <el-option label="是" :value='1'></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col v-if="state.placeFollowOrderInfo.oneBatch == 0" :xs="24" :sm="12" :md="12" :lg="12" :xl="12"
                        class="mb20">
                        <el-form-item label="批次中的第几批">
                            <el-input v-model="state.placeFollowOrderInfo.batchSecond" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="汇率">
                            <el-input v-model="state.placeFollowOrderInfo.exchangeRate" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">取 消</el-button>
                    <el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="maoriProductDialog">
import { reactive, ref, onMounted } from 'vue';
import { usePlaceFollowOrderApi } from '/@/api/order/placeFollowOrder';
import { useVendorApi } from '/@/api/mainData/vendor';
import { useLogisticalApi } from '/@/api/mainData/logistical';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const state = reactive({
    placeFollowOrderInfo: {
        id: '',
        platform: 1,                        // 平台：1_amazon,2_海外仓 
        vendorId: '',                       // 供货商ID
        orderTime: '',                      // 下单日期
        poP: '',                            // PO-P代码
        poC: '',                            // PO-C代码
        pickupTime: '',                     // 提货日期
        shippingTime: '',                   // 开船日期
        actualWarehouseEntryTime: '',       // 实际入仓日期
        taxIncluded: 1,                     // 是否含税
        taxRate: 0,                         // 税点
        vendorPrepaymentTime: '',           // 预付款日期
        vendorRemainingPayment: 0,          // 货款剩余
        vendorRemainingPaymentDueTime: '',  // 货款剩余付款日期
        amazonWarehouseCode: '',            // Amazon仓库代码
        shipmentCode: '',                   // 货件编码
        logisticalCode: '',                   // 物流编码
        shippingMethod: 1,                  // 发货方式，1_海外仓，2_海运
        logisticalId: '',                   // 物流商
        logisticalName: '',
        logisticalPaymentTime: '',          // 物流付款日期
        logisticalPaymentStatus: 0,         // 物流付款状态，0_未付款,1_已付款
        logisticalPrice: 0,                 // 物流价格
        reverseRatio: 0,                    // 逆算比例
        customsFee: 0,                      // 报关费
        inlandFreight: 0,                   // 内陆运费
        actualTaxPaied: 0,                  // 实付税金
        actualFreightPaied: 0,              // 实付运费
        estimatedDeliveryWarehouseTime: '', // 预计送仓日期
        actualDeliveryWarehouseTime: '',    // 实际送仓日期
        receiveStatus: 0,                   // 接收状态：0_未接收，1_已接收
        exchangeRate: 0,                    // 售价币种同人民币的汇率
        batchNumber: 1,                     // 批次   
        batchSecond: '',                    // 批次中的第几批
        oneBatch: 1,                        // 是否一批运走
        vendorProductTypeId: '',
    },
    vendorOption: [] as Vendor[],
    logisticalOption: [] as Logistical[],
    vendorProductTypeOption: [] as VendorProductType[], //供货商产品类型
    dialog: {
        isShowDialog: false,
        type: '',
        title: '',
        submitTxt: '',
    },
});

// 引入 api 请求接口
const placeFollowApi = usePlaceFollowOrderApi();
const vendorApi = useVendorApi();
const logisticalApi = useLogisticalApi();

// 打开弹窗
async function openDialog(type: string, placeFollowOrderId?: number) {
    if (type === 'edit') {
        await initPlaceFollowOrderDetail(placeFollowOrderId);

        await initVendorProductTypeOption();
        state.dialog.title = '修改工厂下单跟单记录';
        state.dialog.submitTxt = '修 改';
    } else {
        state.dialog.title = '新增工厂下单跟单记录';
        state.dialog.submitTxt = '新 增';
        clearProductInfo();
    }
    state.dialog.type = type;
    state.dialog.isShowDialog = true;
};

// 清除表单信息
const clearProductInfo = () => {
    state.placeFollowOrderInfo = {
        id: '',
        platform: 1,
        vendorId: '',
        orderTime: '',
        poP: '',
        poC: '',
        pickupTime: '',
        shippingTime: '',
        actualWarehouseEntryTime: '',
        taxIncluded: 1,
        taxRate: 0,
        vendorPrepaymentTime: '',
        vendorRemainingPayment: 0,
        vendorRemainingPaymentDueTime: '',
        amazonWarehouseCode: '',
        shipmentCode: '',
        logisticalCode: '',
        shippingMethod: 1,
        logisticalId: '',
        logisticalName: '',
        logisticalPaymentTime: '',
        logisticalPaymentStatus: 0,
        logisticalPrice: 0,
        reverseRatio: 0,
        customsFee: 0,
        inlandFreight: 0,
        actualTaxPaied: 0,
        actualFreightPaied: 0,
        estimatedDeliveryWarehouseTime: '',
        actualDeliveryWarehouseTime: '',
        receiveStatus: 0,
        exchangeRate: 0,
        batchNumber: 1,
        batchSecond: '',
        oneBatch: 1,
        vendorProductTypeId: '',
    };
}

// 关闭弹窗
const closeDialog = () => {
    state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
    closeDialog();
};

// 提交
async function onSubmit() {
    await placeFollowApi.editPlaceFollowOrder(state.placeFollowOrderInfo);
    closeDialog(); // 关闭弹窗
    emit('refresh');
};

// 初始化工厂下单跟单记录
async function initPlaceFollowOrderDetail(placeFollowOrderId?: number) {
    if (placeFollowOrderId == undefined) {
        return;
    }
    const param = {
        id: placeFollowOrderId,
    }
    const result = await placeFollowApi.placeFollowOrderDetail(param);
    if (result.data == null) {
        return Promise.resolve(true);
    }
    const placeFollowOrderDetail: PlaceFollowOrder = result.data;
    state.placeFollowOrderInfo = placeFollowOrderDetail;
}

// 搜索供货商
const filterVendor = (query: string) => {
    state.vendorOption = state.vendorOption.filter((item) => {
        return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1;
    })
}

// 变更供货商后
async function initVendorProductTypeOption(operateType?:string) {
    if(operateType == "change"){
        state.placeFollowOrderInfo.vendorProductTypeId = '';
    }
    if (null != state.placeFollowOrderInfo.vendorId && '' != state.placeFollowOrderInfo.vendorId) {
        const param = { vendorId: state.placeFollowOrderInfo.vendorId }
        const result = await vendorApi.queryAllVendorProductTypeList(param);
        if (result.data == null)
            return Promise.resolve(true);
        const vendorProductTypeList: VendorProductType[] = result.data.rows;
        state.vendorProductTypeOption = vendorProductTypeList;
    }
}

// 初始化供应商数据
async function initVendorOption() {
    const result = await vendorApi.queryAllVendorList()
    if (result.data == null)
        return Promise.resolve(true);
    const vendorList: Vendor[] = result.data.rows;
    state.vendorOption = vendorList;
}

// 初始化物流商数据
async function initLogisticalOption() {
    const result = await logisticalApi.queryAllLogisticalList();
    if (result.data == null)
        return Promise.resolve(true);
    const logisticalList: Logistical[] = result.data.rows;
    state.logisticalOption = logisticalList;
}

onMounted(() => {
    initVendorOption();
    initLogisticalOption();
});

// 暴露变量
defineExpose({
    openDialog,
});
</script>

<style scoped>
.button-center {
    display: flex;
    justify-content: center;
}
</style>